<template>
  <div>
    <input v-model="a" />
  </div>
</template>

<script>
export default {
  name: "bCom",
  data() {
    return {
      a: 1,
      b: {
        c: 2
      },
      d: {
        e: 3
      }
    };
  },
  watch: {
    a(val, oldVal) {
      console.log("val: ", val, "oldVal: ", oldVal);
      this.b.c += 1;
      this.d.e += 1;
    },
    b: {
      handler(val, oldVal) {
        console.log("b触发了 ",'val: ',val,'oldVal: ',oldVal);
      }
    },
    d: {
        handler(val,oldVal) {
            console.log("d触发了 ",'val: ',val,'oldVal: ',oldVal);
        },
        // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深，默认为false
        deep: true
    }
  }
};
</script>